<script setup lang="ts">
import PageContent from '@/components/page-content';
import PageSearch from '@/components/page-search';
import { usePageModalHooks } from '@/hooks/use-page-modal';
import { usePageSearchHooks } from '@/hooks/use-page-search';
import { useStore } from '@/store';
import { computed, ref } from 'vue';

import { contentTableConfig } from './config/content.config';
import { modalConfig } from './config/modal.config';
import { searchFormConfig } from './config/search.config';

// 1.处理密码的逻辑
const newCallback = () => {
  const passwordItem = modalConfig.formItems.find((item) => item.field === 'password');
  passwordItem!.isHidden = false;
};
const editCallback = () => {
  const passwordItem = modalConfig.formItems.find((item) => item.field === 'password');
  passwordItem!.isHidden = true;
};

const [pageContentRef, handleResetClick, handleQueryClick] = usePageSearchHooks();
const [pageModalRef, defaultInfo, handleNewData, handleEditData] = usePageModalHooks(
  newCallback,
  editCallback
);
const store = useStore();
const modalConfigRef = computed(() => {
  const departmentItem = modalConfig.formItems.find((item) => item.field === 'departmentId');
  departmentItem!.options = store.state.entireDepartment.map((item) => {
    return {
      title: item.name,
      value: item.id
    };
  });
  const roleItem = modalConfig.formItems.find((item) => item.field === 'roleId');
  roleItem!.options = store.state.entireRole.map((item) => {
    return {
      title: item.name,
      value: item.id
    };
  });
  return modalConfig;
});
</script>

<template>
  <div class="user">
    <page-search
      @resetBtnClick="handleResetClick"
      @queryBtnClick="handleQueryClick"
      :searchFormConfig="searchFormConfig"
    />
    <page-content
      ref="pageContentRef"
      :contentTableConfig="contentTableConfig"
      pageName="user"
      @newBtnClick="handleNewData"
      @editBtnClick="handleEditData"
    ></page-content>
    <page-modal
      :defaultInfo="defaultInfo"
      ref="pageModalRef"
      pageName="user"
      :modalConfig="modalConfigRef"
    ></page-modal>
  </div>
</template>
<style lang="less" scoped>
.content {
  border-top: 20px solid #f5f5f5;
}
</style>
